<template>
	<div class="background">
		<div class="lottery-container">
			<h2>欢迎参加抽奖活动！</h2>

			<div class="prize-list">
				<div v-for="(prize, index) in prizes" :key="index" class="prize" :class="{ winner: prize === winner }">
					{{ prize }}
				</div>
			</div>

			<button @click="drawLottery" :disabled="isDrawing">
				{{ isDrawing ? '抽奖中...' : '开始抽奖' }}
			</button>

			<div v-if="winner" class="winner-message">
				恭喜你，获得了：{{ winner }}！
			</div>
		</div>
	</div>
</template>
<style scoped>
	.background {
		position: fixed;
		height: 100%;
		width: 100%;
		background-image: linear-gradient(
		90deg,
		red,
		pink
		);
		background-size: 400px;
		animation:myanimation 10s infinite;
	}
	@keyframes myanimation{
		0%{
			background-position: 0% 50%;
		}
		50%{
			background-position: 0% 50%;
		}
		100%{
			background-position: 0% 50%;
		}
	}

	.lottery-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		text-align: center;
	}

	.prize-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 20px;
	}

	.prize {
		padding: 10px 20px;
		margin: 10px;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: transform 0.2s;
	}

	.prize:hover {
		transform: scale(1.1);
	}

	.prize.winner {
		background-color: #ffcc00;
		color: white;
		font-weight: bold;
	}

	button {
		padding: 10px 20px;
		font-size: 16px;
		background-color:  #ffaa00;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		margin-top: 20px;
	}

	button:disabled {
		background-color: #ddd;
		cursor: not-allowed;
	}

	.winner-message {
		margin-top: 20px;
		font-size: 18px;
		color: #e74c3c;
		font-weight: bold;
	}
</style>
<script>
	export default {
		data() {
			return {
				prizes: ['一等奖 - iPhone 15', '二等奖 - 1000元购物卡', '三等奖 - 蓝牙耳机', '幸运奖 - 电影票', '鼓励奖 - 水杯', '感谢奖 - 小礼包'],
				winner: null, // 当前的获奖者
				isDrawing: false, // 控制抽奖按钮的状态
			};
		},
		methods: {
			drawLottery() {
				if (this.isDrawing) return; // 如果正在抽奖中，禁止点击

				this.isDrawing = true;
				this.winner = null; // 重置获奖者

				// 模拟抽奖过程，设置动画延迟
				setTimeout(() => {
					const randomIndex = Math.floor(Math.random() * this.prizes.length); // 随机选择奖品
					this.winner = this.prizes[randomIndex]; // 设置获奖者

					// 4秒后允许用户再次抽奖
					setTimeout(() => {
						this.isDrawing = false;
					}, 1000);
				}, 2000); // 延迟2秒开始展示抽奖动画
			},
		},
	};
</script>